<template>
  <el-dialog
    v-if="visible"
    :title="info.title"
    append-to-body
    :visible.sync="visible"
    center
    width="1080px"
    :before-close="handleCancel"
  >
    <el-form
      ref="formDate"
      label-suffix=":"
      label-width="100px"
      :rules="rules"
      :model="form"
    >
      <el-row>
        <el-col :span="10">
          <el-form-item label="供应商" prop="sup_id" style="width: 100%">
            <SupplierSelect v-model="form.sup_id" />
          </el-form-item>
        </el-col>
        <el-col :span="10" class="h30" />
        <el-col :span="4">
          <MaterialsSelect v-if="info.type !== 'view'" :get-data="handleAdd" />
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark" style="width: 52%">
            <el-input
              v-model="form.remark"
              type="textarea"
              :rows="1"
              size="small"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" class="title">
          <el-row>
            <el-col :span="20">物料详情</el-col>
          </el-row>
        </el-col>
        <el-form-item
          label-width="0"
          class="pl5"
          prop="materials"
          style="width: 100%"
        />
        <el-col :span="24">
          <el-table
            class="search-table"
            :data="list"
            border
            fit
            highlight-current-row
            style="width: 100%"
          >
            <el-table-column label="序号" align="center" width="56px">
              <template slot-scope="{ $index }">
                {{ $index + 1 }}
              </template>
            </el-table-column>
            <el-table-column label="品名" width="260px" prop="name" />
            <el-table-column label="单价" align="center" width="120px">
              <template slot-scope="{ row }">
                <el-input v-model="row.price" size="mini" clearable />
              </template>
            </el-table-column>
            <el-table-column label="评估价" align="right" width="80px">
              <template slot-scope="{ row }">
                {{ app.toFix(row.evaluation_price, 2) }}
              </template>
            </el-table-column>
            <el-table-column label="数量" align="center" width="180px">
              <template slot-scope="{ row }">
                <el-input v-model="row.total" size="mini" clearable />
              </template>
            </el-table-column>
            <el-table-column label="规格型号" width="120px" prop="sku" />
            <el-table-column label="参数" width="260px" prop="parameter" />
            <el-table-column label="品牌" width="140px" prop="brand" />
            <el-table-column label="单位" width="140px" prop="unit" />
            <el-table-column label="备注" min-width="260px" prop="remark" />
            <el-table-column
              v-if="info.type !== 'view'"
              fixed="right"
              label="操作"
              align="center"
              width="100px"
            >
              <template slot-scope="{ row, $index }">
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDeleteMat(row, $index)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="fr mt10">
            <el-button size="small" @click="handleCancel()">取 消</el-button>
            <el-button
              v-if="form.state === 0"
              type="primary"
              size="small"
              @click="handleBefore()"
              >保 存</el-button
            >
          </div>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
import SupplierSelect from '@/myComponents/SupplierSelect'
import MaterialsSelect from '@/myComponents/MaterialsSelect'
import { addPur, updPur } from '@/api/purchase'
import { purInfos } from '@/api/purchase/purchase'
import form from '@/utils/form'

export default {
  components: { SupplierSelect, MaterialsSelect },
  extends: form,
  props: {
    reqAdd: {
      default: addPur,
      type: Function,
    },
    reqUpd: {
      default: updPur,
      type: Function,
    },
  },
  data() {
    const vnull = (rule, value, callback) => {
      if (this.materials.length === 0) {
        callback(new Error(rule.message))
      } else {
        callback()
      }
    }
    return {
      rules: {
        sup_id: [
          { required: true, trigger: 'blur', message: '供应商不可为空' },
        ],
        materials: [
          {
            required: true,
            trigger: 'blur',
            message: '请添加物料信息',
            validator: vnull,
          },
        ],
      },
      materials: [],
      list: [],
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.$set(this, 'form', {})
        this.$set(this, 'list', [])
        this.$set(this, 'form', this.info.edit)
        if (this.info.type === 'edit' || this.info.type === 'view') {
          this.purInfos()
        }
      }
    },
    getData: {
      type: Function,
      default: function () {},
    },
  },
  mounted() {},
  methods: {
    handleAdd(e) {
      let i = 0
      const kj = {}
      for (i = 0; i < this.list.length; i++) {
        kj['' + this.list[i].id] = '-'
      }
      for (i = 0; i < e.length; i++) {
        if (!kj['' + e[i].id]) this.list.push(e[i])
      }
    },
    handleDeleteMat(row, index) {
      this.list.splice(index, 1)
    },
    purInfos() {
      purInfos({ pur_id: this.form.id })
        .then((response) => {
          this.list = response.list
        })
        .catch((err) => {
          this.$message.error(err.msg)
        })
    },
    handleBefore() {
      if (this.list) {
        const list = this.list
        const data = []
        list.forEach((item) => {
          try {
            const total = parseFloat(item.total)
            const price = parseFloat(item.price)
            if (total > 0 && price > 0) {
              const o = {}
              o.lm_id = item.id
              o.price = price
              o.total = total
              data.push(o)
            }
          } catch (error) {}
        })
        this.materials = data
        this.form.infos = JSON.stringify(this.materials)
        this.handleEdit()
      }
    },
  },
}
</script>

<style scoped>
.title {
  height: 34px;
  line-height: 34px;
  padding-left: 6px;
  font-size: 14px;
  font-weight: 600;
}
.mat-title {
  float: left;
  width: 30%;
  overflow: hidden;
  padding: 5px 10px;
  text-align: right;
  font-weight: bolder;
}
.mat-content {
  float: right;
  width: 70%;
  overflow: hidden;
  padding: 5px 10px;
}
</style>
